* {
    /* ====== Colors ====== */
    -fx-primary: #2A9D8F;
    -fx-primary-dark: derive(#2A9D8F, -40%);
    -fx-primary-light: derive(#2A9D8F, 40%);
    -fx-secondary: #33485d;
    -fx-secondary-hover: derive(#264653, -40%);
    -fx-secondary-light: derive(#264653, +40%);

    -fx-third: #F4A261;
    -fx-third-dark: #E76F51;
    -fx-third-light: #E9C46A;
    -fx-red: #C91A29;
    -fx-error: #ff8c00;
    -fx-gray: #E0E0E0;
    -fx-bg: #F5F7FE;
    /* ====== Text ====== */
    -fx-primary-text: #000000;
    -fx-secondary-text: #ffffff;
    /* ====== Button ====== */
    -fx-primary-button: linear-gradient(-fx-primary-light, -fx-primary);
    /**/
    -fx-primary-button-text: -fx-secondary-text;
    -fx-primary-button-hover: -fx-primary-dark;
    /* ====== Table ====== */
    -fx-even-table: #E5F1F4;
    -fx-odd-table: #fbf9fa;
    -fx-hover-table: white;
}

.root {
    -fx-background-color: -fx-bg;
}

/* ============ label ============ */
.label {
    -fx-text-fill: -fx-primary-text;
}

.error-label {
    -fx-text-fill: -fx-error;
}

/* ============ button ============ */
.button {
    -fx-background-color: -fx-primary-button;
    -fx-background-radius: 10;
    -fx-text-fill: -fx-primary-button-text;
    -fx-cursor: hand;
}

.button .glyph-icon {
    -fx-fill: -fx-primary-button-text;
}

.button:hover {
    -fx-background-color: -fx-primary-button-hover;
}

.transparent-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-text-fill: -fx-primary-text;
}

.transparent-button .glyph-icon {
    -fx-fill: -fx-primary-text;
}

.transparent-button:hover {
    -fx-background-color: transparent;
}

.close-button {
    -fx-background-color: linear-gradient(red, -fx-red);;
}

.close-button:hover {
    -fx-background-color: derive(-fx-red, -20%);
}

.confirm-button {
    -fx-background-color: linear-gradient(green, darkgreen);
}

.confirm-button:hover {
    -fx-background-color: derive(green, -20%);
}

.primary-button {
    -fx-background-color: linear-gradient(-fx-primary-light, -fx-primary);
}

.primary-button .glyph-icon {
    -fx-fill: -fx-secondary-text;
}

.primary-button:hover {
    -fx-background-color: derive(-fx-primary, -10%);
}

.secondary-button {
    -fx-background-color: linear-gradient(-fx-secondary, -fx-secondary-hover);
    -fx-text-fill: -fx-secondary-text;
}

.secondary-button .glyph-icon {
    -fx-fill: -fx-secondary-text;
}

.secondary-button:hover {
    -fx-background-color: derive(-fx-secondary, -50%);
}

.gray-button {
    -fx-background-color: linear-gradient(darkgrey, gray);
}

.gray-button:hover {
    -fx-background-color: gray;
}

/* ============ check-box ============ */
.check-box {
    -jfx-checked-color: -fx-secondary;
    -jfx-unchecked-color: -fx-secondary;
    -fx-text-fill: -fx-primary-text;
}

/* ============ radio-button ============ */
.radio-button {
    -jfx-selected-color: -fx-primary;
    -jfx-unselected-color: -fx-primary-text;
    -fx-text-fill: -fx-primary-text;
    -fx-font-size: 20;
}

/* ============ combo-box ============ */
.combo-box {
    -fx-alignment: center;
    -fx-text-alignment: center;
}

.combo-box .list-cell {
    -fx-alignment: CENTER;
}

.combo-box .list-cell:selected:empty {
    -fx-alignment: CENTER;
}

.combo-box-normal {
    -fx-text-fill: -fx-primary-text;
    -jfx-focus-color: -fx-primary-text;
    -jfx-unfocus-color: -fx-primary-text;
}

/* ============ TextField ============ */
.text-field-normal {
    -jfx-focus-color: -fx-primary-text;
    -jfx-unfocus-color: -fx-primary-text;
    -fx-prompt-text-fill: derive(-fx-primary-text, 90%);
    -fx-text-fill: -fx-primary-text;
    -fx-font-size: 17;
}

/* ============ Hamburger ============ */
.jfx-hamburger-icon {
    -fx-spacing: 5;
    -fx-cursor: hand;
}

.separator-toolbar *.line {
    -fx-border-style: solid;
    -fx-border-width: 0 0 1 0; /* its make really one-pixel-border */
    -fx-border-color: -fx-secondary-light;
}

.jfx-hamburger-icon StackPane {
    -fx-background-color: -fx-secondary;
    -fx-background-radius: 5px;
    -fx-pref-width: 40px;
    -fx-pref-height: 7px;
}

.jfx-hamburger-icon-normal {
    -fx-spacing: 5;
    -fx-cursor: hand;
}

.jfx-hamburger-icon-normal StackPane {
    -fx-background-color: -fx-secondary-text;
    -fx-background-radius: 5px;
    -fx-pref-width: 40px;
    -fx-pref-height: 7px;
}

/* ============ Table ============ */
.table .column-header,
.table .column-header-background .filler {
    -fx-size: 14px;
}

.table .table-column {
    -fx-alignment: center;
}

.table .column-header .label {
    -fx-text-fill: black;
    -fx-font-weight: normal;
    -fx-alignment: CENTER;
    -fx-font-family: "Tajawal-Bold";
}

.tree-table-row-cell {
    -fx-text-fill: darkcyan;
    -fx-border-color: black;
    -fx-border-style: solid;
    -fx-border-width: 0.25;
    -fx-font: normal 20px 'Tajawal-Medium';
}

.tree-table-row-cell:even {
    -fx-background-color: -fx-even-table;
}

.tree-table-row-cell:odd {
    -fx-background-color: -fx-odd-table;
}

.tree-table-row-cell:hover {
    -fx-font-size: 20px;
    -fx-background-color: -fx-hover-table;
    -fx-border-style: solid;
    -fx-border-width: 1;
}

.table {
    /*-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.1), 20, 0, 0, 0);*/
    /*-fx-border-radius: 30;*/
    /*-fx-background-radius: 30;*/
}

.table-btn {
    -fx-background-color: transparent;
    -fx-cursor: hand;
}

.table-btn .glyph-icon {
    -fx-fill: -fx-secondary;
    -fx-font-family: "FontAwesome";
    -fx-font-size: 20px;
}

.table-btn:hover {
    -fx-background-color: transparent;
}

/* ============ Scroll Pane ============ */
.scroll-pane {
    -fx-background-color: -fx-bg;
}

.scroll-bar:horizontal .track,
.scroll-bar:vertical .track {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-background-radius: 0.0em;
    -fx-border-radius: 2.0em;
}


.scroll-bar:horizontal .increment-button,
.scroll-bar:horizontal .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0.0em;
    -fx-padding: 0.0 0.0 10.0 0.0;

}

.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0.0em;
    -fx-padding: 0.0 10.0 0.0 0.0;

}

.scroll-bar .increment-arrow,
.scroll-bar .decrement-arrow {
    -fx-shape: " ";
    -fx-padding: 0.15em 0.0;
}

.scroll-bar:vertical .increment-arrow,
.scroll-bar:vertical .decrement-arrow {
    -fx-shape: " ";
    -fx-padding: 0.0 0.15em;
}

.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color: derive(black, 90.0%);
    -fx-background-insets: 2.0, 0.0, 0.0;
    -fx-background-radius: 2.0em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color: derive(#4D4C4F, 10.0%);
    -fx-background-insets: 2.0, 0.0, 0.0;
    -fx-background-radius: 2.0em;
}

/*==== SLIDER ====*/
.progress-slider .track {
    -fx-background-color: null; /* Hide the track */
}

.slider .track {
    -fx-background-color: null; /* Hide the track */
    -fx-background-insets: 1 0 -1 0, 0, 1;
    -fx-background-radius: 2.5, 2.5, 1.5;
    -fx-padding: 0.208333em; /* 2.5 */
}

.progress-bar .bar {
    -fx-padding: 4px;
    -fx-background-insets: 0;
}


.jfx-slider > .track {
    -fx-background-color: -fx-primary;
}

/* Styling the slider thumb */
.jfx-slider > .thumb {
    -fx-background-color: -fx-secondary;
}

/* Styling the filled track */
.jfx-slider > .colored-track {
    -fx-background-color: -fx-secondary;
}

/* Styling the animated thumb */
.jfx-slider > .animated-thumb {
    -fx-background-color: -fx-secondary;
}

.file-container {
    -fx-background-color: -fx-secondary-light;
    -fx-border-width: 0 0 2 0;
    -fx-border-color: gray;
    -fx-alignment: top-left;
    -fx-spacing: 15;
}

.file-container .label {
    -fx-text-fill: -fx-secondary-text;
    -fx-font-size: 16;
    -fx-font-weight: bold;
    -fx-max-width: infinity;
}